<template>
  <div class="chat-file" @click="download">
    <div class="chat-file-body">
      <div class="chat-file-title">{{ fileName }}</div>
      <div class="chat-file-size">{{ size }}M</div>
    </div>
    <div class="chat-file-icon">
      <i :class="getIcon" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    fileName: { type: String, required: true },
    size: { type: Number, default: 0 }, //单位必须是M
    url: { type: String, required: true },
  },
  computed: {
    getIcon() {
      let sp = this.fileName.split(".");
      if (
        [
          "xls",
          "xlsx",
          "doc",
          "docx",
          "ppt",
          "pptx",
          "zip",
          "rar",
          "pdf",
          "gif",
          "jpg",
          "jpeg",
          "bmp",
          "png"
        ].indexOf(sp[sp.length - 1].toLowerCase()) < 0
      ) {
        return "iconfont icon-file-unknown";
      }
      return "iconfont icon-file-" + sp[sp.length - 1].toLowerCase();
    },
  },
  methods: {
    download() {
      window.open(this.url);
    },
  },
};
</script>

<style lang="less" scoped>
.chat-file {
  width: 160px;
  display: flex;
  cursor: pointer;
  border: #1989fa solid 1px;
  border-radius: 3px;
  padding: 5px;
  background-color: #fff;
}
.chat-file-body {
  width: 130px;
  flex: 0 0 130px;
  justify-content: start;
}
.chat-file-title {
  font-size: 14px;
  font-weight: bold;
  color: rgb(61, 61, 61);
  word-wrap: break-word;
  padding-right: 5px;
}
.chat-file-size {
  font-size: 12px;
  color: #3b3b3b;
  height: 20px;
  line-height: 20px;
}
.chat-file-icon {
  width: 30px;
  flex: 0 0 30px;
  justify-content: end;
  position: relative;
  i {
    font-size: 30px;
    color: #1989fa;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
